<template>
	<view class="container">
		<view class="member-header">
			<view class="stat-card">
				<view class="stat-item">
					<text class="stat-number">{{memberStats.totalMembers || 0}}</text>
					<text class="stat-label">会员总数</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-number">{{memberStats.activeMembers || 0}}</text>
					<text class="stat-label">活跃会员</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-number">{{memberStats.newMembers || 0}}</text>
					<text class="stat-label">本月新增</text>
				</view>
			</view>
		</view>
		
		<view class="search-section">
			<view class="search-bar">
				<image class="search-icon" src="/static/icon-search.png"></image>
				<input 
					class="search-input" 
					type="text" 
					placeholder="搜索会员昵称/ID" 
					v-model="searchKeyword"
					@confirm="searchMember"
				/>
				<view class="clear-btn" v-if="searchKeyword" @click="clearSearch">
					<image class="clear-icon" src="/static/icon-clear.png"></image>
				</view>
			</view>
		</view>
		
		<view class="member-list">
			<view v-if="members.length === 0" class="empty-tip">
				<image class="empty-icon" src="/static/empty-data.png"></image>
				<text class="empty-text">暂无会员数据</text>
			</view>
			
			<view v-else class="member-table">
				<view class="table-header">
					<view class="th th-user">会员信息</view>
					<view class="th th-date">加入时间</view>
					<view class="th th-action">操作</view>
				</view>
				
				<view 
					class="table-row" 
					v-for="(item, index) in members" 
					:key="index"
				>
					<view class="td td-user">
						<image class="user-avatar" :src="item.avatar || '/static/default-avatar.png'"></image>
						<view class="user-info">
							<text class="user-name">{{item.nickName || '用户昵称'}}</text>
							<text class="user-id">ID: {{item.userId}}</text>
						</view>
					</view>
					<view class="td td-date">
						<text class="join-date">{{formatDate(item.joinTime)}}</text>
					</view>
					<view class="td td-action">
						<button class="detail-btn" @click="viewMemberDetail(item)">详情</button>
					</view>
				</view>
			</view>
			
			<view class="load-more" v-if="hasMore && members.length > 0">
				<text class="load-text" @click="loadMore">加载更多</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../../api/api.js';
	
	export default {
		data() {
			return {
				members: [],
				memberStats: {
					totalMembers: 0,
					activeMembers: 0,
					newMembers: 0
				},
				pageNum: 1,
				pageSize: 10,
				hasMore: false,
				searchKeyword: '',
				isLoading: false
			}
		},
		onLoad() {
			this.getMemberStats();
			this.getMemberList();
		},
		methods: {
			async getMemberStats() {
				try {
					const res = await api.user.getMemberStats();
					if (res.code === 200 && res.data) {
						this.memberStats = {
							totalMembers: res.data.totalMembers || 0,
							activeMembers: res.data.activeMembers || 0,
							newMembers: res.data.newMembers || 0
						};
					}
				} catch (err) {
					console.error('获取会员统计失败', err);
					uni.showToast({
						title: '获取会员统计失败',
						icon: 'none'
					});
				}
			},
			async getMemberList(reset = false) {
				if (this.isLoading) return;
				
				if (reset) {
					this.pageNum = 1;
					this.members = [];
				}
				
				this.isLoading = true;
				uni.showLoading({
					title: '加载中...'
				});
				
				try {
					const params = {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						keyword: this.searchKeyword
					};
					
					const res = await api.user.getMemberList(params);
					if (res.code === 200) {
						const list = res.data.list || [];
						
						if (reset) {
							this.members = list;
						} else {
							this.members = [...this.members, ...list];
						}
						
						this.hasMore = this.members.length < res.data.total;
						
						if (this.pageNum === 1 && list.length === 0) {
							// 显示空数据提示
						}
					}
				} catch (err) {
					console.error('获取会员列表失败', err);
					uni.showToast({
						title: '获取会员列表失败',
						icon: 'none'
					});
				} finally {
					this.isLoading = false;
					uni.hideLoading();
				}
			},
			loadMore() {
				if (this.hasMore && !this.isLoading) {
					this.pageNum++;
					this.getMemberList();
				}
			},
			searchMember() {
				this.getMemberList(true);
			},
			clearSearch() {
				this.searchKeyword = '';
				this.getMemberList(true);
			},
			viewMemberDetail(item) {
				uni.navigateTo({
					url: '/pages/mine/member/detail?id=' + item.userId
				});
			},
			formatDate(timestamp) {
				if (!timestamp) return '--';
				
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}
	
	.member-header {
		background-color: #FF0000;
		padding: 30rpx 20rpx;
	}
	
	.stat-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.stat-divider {
		width: 1px;
		height: 60rpx;
		background-color: #f0f0f0;
	}
	
	.stat-number {
		font-size: 40rpx;
		font-weight: bold;
		color: #FF0000;
		margin-bottom: 10rpx;
	}
	
	.stat-label {
		font-size: 26rpx;
		color: #666;
	}
	
	.search-section {
		padding: 20rpx;
	}
	
	.search-bar {
		background-color: #FFFFFF;
		border-radius: 40rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.search-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.search-input {
		flex: 1;
		height: 80rpx;
		font-size: 28rpx;
	}
	
	.clear-btn {
		padding: 10rpx;
	}
	
	.clear-icon {
		width: 36rpx;
		height: 36rpx;
	}
	
	.member-list {
		padding: 0 20rpx 30rpx;
	}
	
	.empty-tip {
		padding: 100rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.empty-icon {
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 20rpx;
		opacity: 0.5;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.member-table {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		margin-top: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.table-header {
		display: flex;
		background-color: #f9f9f9;
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.th {
		font-size: 26rpx;
		color: #666;
		font-weight: bold;
		text-align: center;
	}
	
	.th-user {
		flex: 3;
		text-align: left;
		padding-left: 20rpx;
	}
	
	.th-date {
		flex: 2;
	}
	
	.th-action {
		flex: 1;
	}
	
	.table-row {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.table-row:last-child {
		border-bottom: none;
	}
	
	.td {
		font-size: 28rpx;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.td-user {
		flex: 3;
		justify-content: flex-start;
		padding-left: 20rpx;
	}
	
	.td-date {
		flex: 2;
	}
	
	.td-action {
		flex: 1;
	}
	
	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.user-info {
		display: flex;
		flex-direction: column;
	}
	
	.user-name {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 6rpx;
	}
	
	.user-id {
		font-size: 24rpx;
		color: #999;
	}
	
	.join-date {
		font-size: 26rpx;
		color: #666;
	}
	
	.detail-btn {
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #FF0000;
		border-radius: 30rpx;
		padding: 6rpx 20rpx;
		line-height: 1.5;
	}
	
	.load-more {
		text-align: center;
		padding: 30rpx 0;
	}
	
	.load-text {
		font-size: 28rpx;
		color: #666;
	}
</style> 